<docs>
  ## 上传头像
</docs>
<template>
  <div class="wrap" v-show="hasInitEvent" @click.stop>
    <div class="header">
      <span class="arrow" @click.prevent="back_btn"></span>
      <h3 class="title">图片上传</h3>
    </div>
    <div class="touxiang tem_comm">
      <div>
        <img class="images" :src="imgSrc" alt @click="imgFn"/>
      </div>
      <img class="close" @click="del" v-show="imgSrc" src="~common/images/close.png" alt="">
    </div>
    <div v-if="imgLen>=2 ? false : true" class="weui-uploader__input-box">
      <input
        id="uploadFile"
        class="weui-uploader__input"
        type="file"
        accept="image/*"
        @change="upload()"
        ref="inputer"
        multiple
      />
    </div>
    <div class="txt">大小不超过1M</div>
    <van-image-preview v-model="imgShow" :images="imgArr" :showIndex="false">
    </van-image-preview>
  </div>
</template>
<script>
import { ImagePreview } from "vant";
export default {
  name: "uploadPic",
  props: {
    hasInitEvent: {
      type: Boolean,
      default: false
    },
    imageSrc: String,
    cliName: String
  },
  data() {
    return {
      imgLen: 0, //图片长度；
      imgArr: [],
      CliName:"",
      imgShow: false,//放大隐藏
      imgSrc: "",
      changFlag: 1
    };
  },
  watch:{
    imageSrc:function (val) {
      if (val) {
        this.$nextTick(()=>{
          this.imgSrc = `${conf.urlPrefix}/jysydj/wj/tphx?filename=${this.imageSrc}&changflag=` + this.changFlag + 1;
        })
      }
    }
  },
  methods: {
    back_btn() {
      this.$emit('update:hasInitEvent', false);
    },
    imgFn() {
      if (this.imgSrc) {
        this.imgArr = [this.imgSrc];
        this.imgShow = true;
      }
    },
    upload () {
      var that = this;
      const file = this.$refs.inputer.files[0];
      var size = file.size;
      if (size > 1*1024*1024) {
        that.$toast('请选择1M以内的图片！');
        return false
      }
      this.formData = new FormData()
      this.formData.append('file', file)
      that.$loading = true;
      that.$http.post("/jysydj/wj/wjsc", this.formData).then(res => {
        const resData = res.returnData;
        this.imgSrc = `${conf.urlPrefix}/jysydj/wj/tphx?filename=${resData.serverName}&changflag=` + this.changFlag + 1;
        that.$alert(resData.message, () => {
          const code = +resData.executeResult;
          if (code) {
            this.$emit('update:hasInitEvent', false);
            this.$emit("update:cliName", resData.clientName);
            this.$emit("update:imageSrc", resData.serverName);
            this.$emit('update:labelName', '已上传');
          }
        });
      })
      .finally(() => {
        that.$loading = false;
      });
    },
    //删除上传的照片；
    del(){
      document.getElementById('uploadFile').value = '';// 防止再次上传相同文件 type--file change事件不触发
      this.imgSrc = '';
      this.$emit("update:cliName", '');
      this.$emit("update:imageSrc", '');
      this.$emit('update:labelName', '未上传');
    },
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.wrap {
  position: fixed;
  top: 92px;
  left: 0;
  background-color: #fff;
  z-index: 11;
  width: 100%;
  height: 100%;
  .txt {
    text-align: center;
  }

  .touxiang {
    height: 289px;
    border-bottom: 1px solid #dbdbdb;
    div {
      width: 160px;
      margin: 0 auto;
      .images {
        width: 160px;
        height: 160px;
        border: 1px solid #ccc;
        display: inline-block;
        vertical-align: middle;
        margin: 34px auto;
      }
    }
    p {
      font-size: 30px;
      text-align: center;
      color: $color-text-title;
    }
    .close{
      position: absolute;
      right: 10%;
      top: 20px;
      height: 50px;
      width: 50px;
    }
  }
}
</style>
